<template>
    <view class="content ml20 mr20">
        <view class="dis_sb mt60 mb40 ml20 mr20">
            <view class="line26">
                <view class="f34 clo-navyBlue">应收数据</view>
                <view class="clo-gray f24">根据订单数据生产应收数据统计</view>
            </view>
            <image src="/static/pic2.png" mode="widthFix" class="pic"></image>
        </view>
        <view class="dis_sb ml30 mr30">
            <view class="clo-999 bgfff line22 pl40 pr40 rad25t" :class="now==1?'active':''" @click="taptab(1)">年度数据</view>
            <view class="clo-999 bgfff line22 pl40 pr40 rad25t" :class="now==2?'active':''" @click="taptab(2)">月度数据</view>
            <view class="clo-999 bgfff line22 pl40 pr40 rad25t" :class="now==3?'active':''" @click="taptab(3)">昨日数据</view>
        </view>
        <view class="pl20 pr20 bgfff rad25 pt10 pb20">
            <div class="dis_ec">
                <view v-if="now == 1 || now == 2" class="dis_ec f28 clo-666 line16  mb10">
                    请选择年份：
                    <picker @change="bindYearChange" :value="Yindex" :range="arrayYear">
                        <view class="clo-blue pl20 pr20 b1ce rad15">{{ arrayYear[Yindex] }}年</view>
                    </picker>
                </view>
                <view v-if="now == 2" class="dis_ec f28 clo-666 line16 mb10 ml10">
                    请选择月份：
                    <picker @change="bindMonthChange" :value="Mindex" :range="arrayMonth">
                        <view class="clo-blue pl20 pr20 b1ce rad15">{{ arrayMonth[Mindex] }}月</view>
                    </picker>
                </view>
            </div>

            <mescroll-uni top="0" :bottom="0" :fixed="false" height="65%" @init="mescrollInit" @down="downCallback" @up="getListFn" :down="mescrollData.downOption" :up="mescrollData.upOption">
                <div class="pt10">
                    <view v-for="(item, index) in dataList" class="w100 bglightBlue rad15 pt10 pb10" :class="{ mt20: index > 0 }" @click="detail(item.id)">
                        <view class="tit mb10 f30">{{ item.company_name }}</view>
                        <view class="dis_sb ">
                            <view class="w30per tac line16 strip">
                                <view class="f32 fwb line18">{{ item.income }}</view>
                                <view class="f24  clo-orange">应收金额(元)</view>
                            </view>
                            <view class="w30per tac line16 strip">
                                <view class="f32 fwb line18">{{ item.collect_money }}</view>
                                <view class="f24  clo-green">已收款(元)</view>
                            </view>
                            <view class="w30per tac line16 strip">
                                <view class="f32 fwb line18">{{ item.receivable_money }}</view>
                                <view class="f24 clo-red">未收款(元)</view>
                            </view>
                        </view>
                    </view>
                </div>
            </mescroll-uni>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, computed, onUnmounted, getCurrentInstance } from 'vue'
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { img, redirect, filterDecimal } from '@/utils/common'

import { collectAllStatistics } from '@/utils/api'
const { proxy } = getCurrentInstance();
proxy.$checkUserType();
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
const now = ref(1)
const Yindex = ref(0)
const Mindex = ref(0)
const arrayMonth = ref(['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']);
const arrayYear = computed(() => {
    let endYear = new Date().getFullYear();
    let startYear = 2022;
    let arr = [];
    while (endYear >= startYear) {
        arr.push(endYear)
        endYear--;
    }
    return arr;
});
const dataList = ref([])
const searchParam = reactive({
    type: 1,
    s_year: '',
    s_year_month:'',
})

const detail = (id)=>{
    redirect({
        url: '/pages/index/detail',
        param: {
            page_type: 'receive', // receive 收款 payment 付款
            customer_id:id,
            ...searchParam
        }
    })
}
const bindYearChange = (e) => {
    Yindex.value = e.detail.value
    dataList.value = [];
    getMescroll().resetUpScroll();
}
const bindMonthChange = (e) => {
    Mindex.value = e.detail.value
    dataList.value = [];
    getMescroll().resetUpScroll();
}

const taptab = (e) => {
    now.value = e
    searchParam.type = e
    dataList.value = [];
    getMescroll().resetUpScroll();
}


const mescrollData = reactive({
    downOption: {},
    upOption: {
        page: {
            size: 10 // 每页数据的数量
        },
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        empty: {
            tip: '~ 暂无数据 ~' // 提示
        }
    }
})

const getListFn = (mescroll) => {

    if (searchParam.type == 1 && typeof arrayYear.value == 'object') {
        searchParam.s_year = arrayYear.value[Yindex.value]
    } else if (searchParam.type == 2 && typeof arrayYear.value == 'object' && typeof arrayMonth.value == 'object') {
        searchParam.s_year_month = arrayYear.value[Yindex.value] + '-' + arrayMonth.value[Mindex.value]
    }
    let data = {
        page: mescroll.num,
        pageSize: mescroll.size,
        ...searchParam
    };
    let showLoading = false;
    if (mescroll.num == 1) {
        showLoading = true;
    }
    collectAllStatistics(data, showLoading).then((res) => {
        let curPageData = res.data.list || [];
        let totalSize = res.data.count;
        //设置列表数据
        if (mescroll.num == 1) {
            dataList.value = [];
        }
        dataList.value = dataList.value.concat(curPageData);
        // mescroll.endSuccess(curPageData.length);
        mescroll.endBySize(curPageData.length, totalSize);
    }).catch(() => {
        mescroll.endErr(); // 请求失败, 结束加载
    })
}
</script>

<style>
	.pic {width: 130rpx;}
	.active{color: #3174fb; border-bottom: 1px solid #3174fb;}
	.strip .f24{background: #fdf6ef; padding: 8rpx 10rpx; border-radius: 15rpx; width: 70%;margin: 0 15%;}
	.strip:nth-child(2) .f24{background: #edf9f4;}
	.strip:nth-child(3) .f24{background: #fbf2f3;}
	.tit::after {top: 12%;}
	.main {height: 65vh; overflow-y: auto;}
</style>
